<template>
  <div class="box">
    <!-- 顶部区域内容 -->
    <div class="header">
      <span><van-icon name="ellipsis" size="35" @click="$router.push('/kind')"/></span>
      <div class="ipt" @click="toSearch">| 请输入搜索关键字</div>
      <span @click="jumpLogin">登录</span>
    </div>
    <!-- ---主要区域内容 -->
    <div class="main" @scroll="scrollMe" ref="main">
      <!-- 轮播图cv组件 -->
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerLists" :key="item.id"><img :src="item.imgurl" /></van-swipe-item>
        </van-swipe>
        <div class="top10">
          <van-grid :column-num="5" :border="false" :icon-size="35" :gutter="0">
            <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
          </van-grid>
        </div>
        <!-- ----秒杀倒计时cv组件---- -->
        <div class="top10">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
        <!-- 秒杀列表商品渲染 -->
        <div class="top10">
          <ul class="seckill">
            <li v-for="item in seckillList" :key="item.proid" @click="jumpTo(item.proid)">
              <van-image width="60" height="60" :src="item.img1" />
              <p class="active">￥{{ item.originprice }}</p>
            </li>
          </ul>
        </div>
        <!-- --商品列表渲染--- -->
        <div class="top10">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- ----两套布局---- -->
            <ul :class="isShow ? 'prolist2' : 'prolist1'">
              <li class="van-hairline--bottom van-hairline--right" v-for="(item, index) in prolist" :key="index">
                <img width="100%" :src="item.img1">
                <div>
                  <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
                  <p>￥<span>{{ item.originprice }}</span></p>
                </div>
              </li>
              <!-- ---布局切换--- -->
              <div class="toggle" @click="isShow = !isShow">
                <van-icon name="bars" v-if="isShow" />
                <van-icon name="apps-o" v-else />
              </div>
            </ul>
          </van-list>
        </div>
      </van-pull-refresh>
      <!-- ---返回顶部---- -->
      <div class="top"
        v-if="scrollTop > 700"
        @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
// ---------api/homejs 
import { getBannerList, getSeckillList, getProList, getBannerLists, getNavList } from '../api/home'
import Vue from 'vue';
import { Swipe, SwipeItem, Grid, GridItem, CountDown, Image as VanImage, Icon, List, PullRefresh } from 'vant';
//  ---------vant移动端组件的引入使用---------------
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);


export default {
  name: 'Home',
  components: {},
  data() {
    return {
      bannerList: [],
      bannerLists:[],
      seckillList: [],
      prolist: [],
      time: 24 * 60 * 60 * 1000,
      navList: [],
      isShow: true,
      count: 2,
      loading: false,
      finished: false,
      isLoading: false,
      scrollTop: 0,
      timer: null,
    }
  },
  methods: {
    // 上拉加载更多
    onLoad() {
      this.loading = true,
        setTimeout(() => {
          getProList({ count: this.count, limiNum: 12 }).then((res) => {
            this.loading = false
            if (res.data.data.length == 0) {
              this.finished = true
            } else {
              this.prolist = [...this.prolist, ...res.data.data]
              this.count++
            }
          });
        }, 1000);
    },
    // 跳转到详情页
    jumpTo(proid) {
      this.$router.push('/detail/' + proid)
    },
    // 跳转到搜索页面
    toSearch(){
      this.$router.push('/search')
    },
    // 跳转到登录页
    jumpLogin() {
      this.$router.push('/login')
    },
    // 下拉刷新页面
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList({ count: this.count, limiNum: 12 }).then((res) => {
          this.prolist = res.data.data
          this.count = 2
        });
      }, 1000);
    },
    // main的高度等于scrollTop=0
    scrollMe() {
      this.scrollTop = this.$refs.main.scrollTop
    },
    // 点击返回顶部
    backTop() {
      setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer)
        } else {
          this.timer = this.$refs.main.scrollTop -= 100
        }
      }, 15)
    }
  },
  created() {
    // 轮播图数据请求
    getBannerList().then((data) => {
      this.bannerList = data.data.data
    });
    // mock数据请求
    getBannerLists().then(data => {
      // console.log(data.data);
      this.bannerLists = data.data
    });
    getNavList().then(res=>{
      console.log(res.data);
      this.navList = res.data
    })
    // 秒杀列表数据请求
    getSeckillList().then((res) => {
      // console.log(res.data.data);
      this.seckillList = res.data.data
    });
    getSeckillList().then((res) => {
      // console.log(res.data.data);
      this.seckillList = res.data.data
    });
    // 获取商品列表 两套布局
    getProList({ count: this.count, limiNum: 12 }).then((res) => {
      // console.log(res.data.data);
      this.prolist = res.data.data
    });
  },
}
</script>

<style scoped>
/* ------------头部相关样式------------ */
.box .header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: orangered;
}

.box .ipt {
  width: 2.5rem;
  height: 0.35rem;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 20px;
  text-align: center;
  line-height: 00.35rem;
  color: #ccc;
}

.box .header span {
  color: white;
}
/* ---------轮播图样式 ------------*/
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe {
  height: 1.8rem;
}

.my-swipe img {
  height: 100%;
}

/* --------toop10------ */
.top10 {
  margin-top: 0.1rem;
  min-height: 0.2rem;
  background-color: #fff;
}


.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.seckill {
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
}

.active {
  color: red;
}


/* --------商品列表相关------------ */
.top10 ul li div h4 {
  font-weight: 400;
}
.top10 ul li div p{
  color: #ee0a24;
}
.top10 ul li div p span{
  font-size: 18px;
}

.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.prolist1 li {
  width: 49%;
}

.prolist1 li img {
  border: 1px solid gray;
}
.prolist2 li div{
  padding-left: 10px;
}
.prolist2 li {
  display: flex;
}

.prolist2 li img {
  width: 30%;
  height: 0.8rem;
  border: 1px solid gray;
}

.prolist2 li div {
  flex: 1;
}
.toggle {
  width: .3rem;
  height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: .5rem;
  right: .2rem;
  text-align: center;
  line-height: .3rem;
}
/* ---------回顶部-------- */
.top {
  width: .3rem;
  height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: .2rem;
  text-align: center;
  line-height: .3rem;
}
</style>
